<template>
  <MyHeader> </MyHeader>

  <main>
    <el-row>

      <el-col :span="6" style="margin-top: 50px">
        <LiftMenu @get_new_tag="get_new_tag"  @select_tag="select_tag"></LiftMenu>
      </el-col>
      <el-col :span="18" style="margin-top: 50px">
        <el-row>
          <el-col :span="3">
          </el-col>
          <el-col :span="18" >
              <h3>添加图片</h3>
            <el-form ref="form" :model="form" label-width="80px" method="post">
              <el-form-item label="图片tag">
                <el-input v-model="form.showTags" :readonly="true"></el-input>
              </el-form-item>


              <el-form-item label="图片上传">
                <input type="file"  @change="getFile" style="display:none;" id="imgupload">
                <div class="after-img">
                  <el-image id="img-box" :src=this.img_src width="100%" height="100%" />
                </div>

              </el-form-item>

              <el-form-item>
                <el-button type="primary" size='small' @click='toUploadFile'>选择图片</el-button>
              </el-form-item>

              <el-form-item>
                <el-button @click="onSubmit">立即提交</el-button>
                <el-button @click="onEX">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="3">
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </main>
</template>

<script>
import MyHeader from "@/components/MyHeader"
import LiftMenu from "@/components/LeftMenu"
import {inject} from 'vue'
import axios from 'axios'
import $cookies from "vue-cookie";

export default {
  name: "AddImg",
  formData: new FormData(),
  data(){
    return{
      myBaseURL: inject('$baseURL'),
      isLogin : false,
      img_file: '',
      img_src: '',
      form: {
        img: '',
        tags: [],
        showTags: ""
      }
    }
  },
  components:{
    MyHeader,
    LiftMenu
  },
  methods:{
    toUploadFile(){
      let btn = document.getElementById('imgupload')
      btn.click()
      this.dialogVisible = false
      this.uploadPercent = 0
    },

    getFile(event) {
      // console.log(event)
      this.img_file = event.target.files[0]
      // 获取 window 的 URL 工具
      var URL = window.URL || window.webkitURL;
      // 通过 file 生成目标 url
      var imgURL = URL.createObjectURL(this.img_file);
      // 用这个 URL 产生一个 <img> 将其显示出来
      this.img_src = imgURL
    },

    onSubmit: function (){
      if(this.isLogin !== "true")
      {
          this.$message.error('请先登录！');//alert("请先登录！")
        return;
      }
      if(this.img_file === null || this.form.tags.length === 0){
          this.$message.error('数据不全！');//alert("数据不全！")
        return
      }
      let tagIds_str = "";
      for(var i=0;i < this.form.tags.length; i++)
      {
        tagIds_str = tagIds_str + (this.form.tags[i])[2] + ","
      }
      this.formData.append("img",this.img_file)
      this.formData.append("tagIds",tagIds_str)
      console.log("tagIds_str:"+tagIds_str)
      const token = $cookies.get("token")
      axios({
        method:'post',
        url:'img/addImg',
        baseURL:this.myBaseURL,
        headers: {
          "Content-Type": "multipart/form-data",
          "User-Token": token,
        },
        data: this.formData,
      }).then(response => {
        print(response.data)
        if(response.data === 1)
            this.$message.success('提交成功！');//alert("提交成功！")
        else
            this.$message.error('提交失败！');//alert("提交失败！")
      }).catch(err=>{
        console.log(err)
        //alert(err.response.data.message+"")
      });
      // 刷新
      this.onEX();
    },
    onEX:function(){
      this.form.tags = []
      this.img_src = '';
      this.img_file = '';
      this.form.showTags = ''
      this.formData = new FormData();
    },
    select_tag:function (tag){
      //接收到子组件传来的tag
      //console.log("接收到子组件传来的tag")
      //console.log(tag)
      //this.tag = tag[0]
      this.form.tags.push(tag)
      this.form.showTags += tag[0] + "("  + tag[1] + "),"
      // console.log(this.form.tags)
      // console.log(this.form.tags.length)
      // if(this.form.tags.length >= 3){
      //   console.log((this.form.tags[0])[0])
      //   console.log((this.form.tags[1])[0])
      //   console.log((this.form.tags[2])[0])
      // }
      // 跳转
      this.gotoSetTagPage(tag[0])
    },
  },
  mounted()
  {
    this.formData = new FormData()
    const islogin = $cookies.get("isLogin")
    console.log(islogin)
    this.isLogin = islogin
  }
}
</script>

<style scoped>

</style>
